<template>
  <div>
    <router-link to="/addOrUpdatePermission">添加权限列表</router-link>
    <el-table :data="userData" border style="width: 100%">
      <el-table-column fixed prop="name" label="权限名"></el-table-column>
      <el-table-column prop="url" label="权限设置"/>
        <el-table-column prop="type" label="权限类型" :formatter="PerFormat"/>
      <el-table-column prop="status" label="权限状态" :formatter="PerStatusFormat"/>
      <el-table-column prop="pid" label="上级Id" :formatter="PerPidFormat" />

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="deletePermission(scope.row)" type="text" size="small"
          >删除</el-button
          >
          <el-button type="text" size="small" @click="updatePermission(scope.row.id)"
          >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 事件的话必须加上事件前缀 -->
    <el-pagination
      @next-click="queryNextPage"
      @prev-click="queryPrePage"
      @size-change="sizeChangeFun"
      @current-change="currentChangeFun"
      :page-size="pageSize"
      background
      layout="prev, pager, next,sizes,jumper,total"
      :total="total"
      :page-sizes="pageSizes"
    >
    </el-pagination>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      },
      updatePermission(id) {
        this.$router.push("/addOrUpdatePermission/"+id);
      },
      PerPidFormat(row, column, cellValue, index){
        return cellValue==-1?"父id":"子id";
      },
      PerStatusFormat(row, column, cellValue, index){
        return cellValue==1?"启用权限":"禁用权限";
      },
      PerFormat(row, column, cellValue, index) {
        return cellValue == 1 ? "目录" : "权限";
      },
      deletePermission(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          var app = this;
          this.$httpRequest.get("Per/PreDelete/" + row.id).then(function () {
            app.$message({
              message: "删除成功",
              type: "success",
              duration: 1000,
              //跳转到显示列表
              onClose: () => {
                //删除本身就在userList页面完成的基础上再查询一遍
                app.getPermissionPage();
              },
            });
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      currentChangeFun(newCurrentChange) {
        //输入页码
        this.current = newCurrentChange;
        this.getPermissionPage();
      },
      sizeChangeFun(newPaegSize) {
        this.pageSize = newPaegSize;
        this.getPermissionPage();
      },
      //上一页触发
      queryPrePage(newCurrent) {
        this.current = newCurrent;
        this.getPermissionPage();
      },
      //下一页触发
      queryNextPage(newCurrent) {
        this.current = newCurrent;
        this.getPermissionPage();
      },
      getPermissionPage() {
        var app = this;
        this.$httpRequest
          .post("Per/PermissionPage", {
            //页面初始化的显示页码
            current: app.current,
            //页面初始化显示的页数
            size: app.pageSize,
          })
          .then(function ({ data }) {
            //成功后调用
            console.log("请求成功" + data);
            // data 获取后端的key值然后调用records属性
            //给userData赋值
            app.userData = data.page.records;
            //给分页的数据赋值
            app.current = data.page.current;
            app.size = data.page.size;
            app.total = data.page.total;
          })
          .catch((error) => {
            //失败后调用
            console.log("请求失败" + error);
          });
      },
    },
    data() {
      return {
        // 在此区域设定页码值
        total: 100, //总条数
        pageSize: 5, //每页显示的条数
        current: 1, //当前页
        pageSizes: [5, 10, 20, 30], //下拉框的内容
        userData: [],
      };
    },
    //把axios的getuserPage传给组件
    mounted: function () {
      //页面加载的时候调用
      this.getPermissionPage();
    },
  };
</script>
<style>
</style>
